<template>
    <div class="app-container">
       <div class="backgroundClass">
            <!-- 学习记录 -->
            <el-page-header style='margin-bottom:24px;' @back="()=>{this.$router.go(-1)}" content="学习记录">
            </el-page-header>   
            <el-tabs v-model="activeName" class="tabs">
                <el-tab-pane label="课程学习统计" name="3">
                    <studyRecord></studyRecord>
                </el-tab-pane>
                <el-tab-pane label="专项练习统计" name="1" v-if="Jurisdiction.专项练习=='显示'">
                    <practiceRecord></practiceRecord>
                </el-tab-pane>
                <el-tab-pane :label="title_name" name="2" v-if="Jurisdiction[title_name=='模拟考试统计'?'模拟考试':'正式考试']=='显示'">
                    <examRecord :titleName='title_name'></examRecord>
                </el-tab-pane>
            </el-tabs>
       </div>
    </div>
</template>

<script>
import practiceRecord from './record/practiceRecord.vue'
import examRecord from './record/examRecord.vue'
import { mapGetters } from "vuex";
import studyRecord from './record/studyRecord.vue'
export default {
    components:{
        practiceRecord,
        examRecord,
        studyRecord
    },
    computed: {
        ...mapGetters(['Jurisdiction']),
    },
    data() {
        return {
            activeName:'3',
            title_name:this.$route.query.zsIsYes=="0"?'模拟考试统计':'正式考试统计',
        }
    },
    created() {
        if(this.$route.query.tab){
            this.activeName = this.$route.query.tab   
        }
    },
}
</script>

<style lang="scss" scoped>
@import '~@/styles/utis.scss';
.app-container{
  height:calc( 100vh - 50px) !important;
}
.backgroundClass{
  height:100%;
}
.tabs{
    height:calc(100% - 45px);
    
}
::v-deep{
    .el-tabs__content{
        height:calc(100% - 55px);
        .el-tab-pane{
            height:100%;
        }
    }
}
</style>